<template>
  <div>
    <div class="breadcrumb-box">
      <div class="w-[90%] xl:w-[1200px] mx-auto text-[#222] transition-all">
        <nuxt-link to="/">首页</nuxt-link> >
        <nuxt-link to="/news">企业新闻</nuxt-link> > 新闻详情
      </div>
    </div>
    <div class="news-con w-[90%] xl:w-[1200px] py-[50px]">
      <h1 class="text-2xl lg:text-4xl text-[#222]">
        {{ detail.title || '标题' }}
      </h1>
      <div class="text-sm text-[#666] mt-5">{{ detail.createTime }}</div>
      <div class="mt-[10px] mb-12 border border-[rgba(34, 34, 34, .09)]"></div>
      <!-- eslint-disable vue/no-v-html -->
      <div v-html="detail.content"></div>
      <!--eslint-enable-->
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    async asyncData({
      params
    }) {
      const {
        data
      } = await axios({
        url: 'https://erp.hnlhzw.cn/official/article/api/get/detail',
        method: 'get',
        params: {
          articleId: params.id
        },
      })
      return {
        detail: data
      }
    },
    data() {
      return {
        detail: '',
      }
    },
    head() {
      return {
        title: this.detail.title + '-联合智为',
        meta: [{
          name: 'referrer',
          content: 'never',
        }]
      }
    },
  }
</script>

<style scoped>
  .breadcrumb-box {
    width: 100%;
    height: 54px;
    display: flex;
    align-items: center;
    background: #f2f3f5;
    border: 1px solid #f4f4f4;
  }

  .news-con {
    margin: 0 auto;
  }

  .news-con ::v-deep img {
    display: inline-block;
    box-sizing: inherit;
  }
</style>
